@charset "utf-8";

@import "../_fontsize.scss";


.biggest{width: 100%;height: 100%;background-color: rgba(0,0,0, .2);position: absolute;
         display: none;
        z-index: 999;
#add{width: 100%;height: r(310);background: #FFFFFF;
                position: relative; 
                position: absolute;
                bottom: 0;
                z-index: 999;
//              display: none;
                animation: s1 800ms ease-out alternate;
            .add-product{
                width: 100%;
                height: 50%;
                
                background: url(../../img/home/index-close.png) no-repeat;
                    background-size: r(100) r(100);
                    background-position: center;} 
            p{display: block; position: absolute;bottom:r(130);right:50%;
            margin-right: r(-46);font-size: r(24);color: #999999;}
            span{display:inline-block;position: absolute;bottom: r(30);right:50%;
                margin-right: r(-32);font-size: r(34);}}}
                
            @keyframes s1{
                0%{bottom: r(-310);opacity: 0.2;}
//              50%{bottom: r(-155);opacity: 0.7;}
                100%{bottom: 0;opacity: 1;}
                }
                
 #bigbig{
     width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
    display: none;
    background: rgba(0,0,0,.3);
#share{
    width: 100%;
    height: r(716);
    position: absolute;
    bottom: 0;
    background: #FFFFFF;
    animation: s1 800ms ease-out alternate;
   
    ul {width: 100%; height: r(179);padding-top: r(20);}
         li{
        float:left;
        width: 33.3%;
        height: 100%;
        text-align: center;
        a{display: block;width: r(105);height: r(105);margin: 0 auto;}
        img{width: 100%; height: 100%;} 
        span{line-height: r(45); color: #999999;font-size:r(22);}
    }}
#share-close{
    height: r(100);
    width: 100%;
    margin-top:r(16) ;
    border-top:1px solid #F0EEEF ;}
    p{text-align: center;line-height: r(100);
    font-size: r(34);} }              
                
      

.web {
    width: 100%;
    height: 100%;
    position: relative;
    background: #f3f4f6;
}
header {
    position: absolute;
    top: 0;
    width: 100%;
    height: r(88);
    line-height: r(88);
    background: #f7f7f7;
    border-bottom: 1px solid #c1c1c1;
    >div{font-size: r(30);
        >a{color: #000000;}}
    .index-Ltop{
        margin-left: r(20);
    }
    .index-Rtop{
        margin-right: r(20);
    }
    .index-Mtop{margin: 0 auto;
                text-align: center;}
    }
    
section {
    position: absolute;
    top: r(88);
    width: 100%;
    bottom:r(100);
    overflow: scroll;
    background: #f3f4f6;
    .index-banner{
        width: 100%;
        height: r(300);
        background: url(../../img/home/index-banner.png) no-repeat;
        background-size: cover;
        text-align: center;
        .index-banner-tittle{
           width: r(216);
            height: r(90);
            padding-top: r(55);
            margin: 0 auto;
                h2{font-size: r(40);
                    color: #FFFFFF;}
                p{font-size: r(24);
                    color: #FFFFFF;}
        }
        .index-inner{width: 100%;height: r(100);
                    font-size: r(0);
                   position: relative;
                    margin-top: r(55);background-color:rgba(000,000,000,.3);
                   >div{color: #FFFFFF;height: 100%;
                        font-size: r(20);
                        h5{font-weight: 500;}
                        }
                   .index-banner-content1{width: 33.3%;text-align: center;margin-top: r(20);}
                   .index-banner-content3{width: 33.3%;text-align: center;margin-top: r(20);
                    span{width: r(10);height: r(10);
                    background: #D62D31;border-radius: 50%;
                    top:r(15);right: r(300);
                    display: block;position: absolute;}}
                   .index-banner-content2{height:100%;padding-top: r(20);}
                    
                   }
    }
        .index-add{width: 90%;height: r(70);
                    border: 1px solid #DFDFDD;
                    margin: 0 auto;
                    border-radius: 10px;
                    margin-top: r(20);
                    background: #FFFFFF;
                    a{background: url(../../img/home/index-add.png) no-repeat;
                    display: inline-block;
                    width: 100%;
                    text-align: center;
                    text-indent: r(50);
//                  padding-left: 50%;
                    background-size:r(34) r(36);
                    background-position: r(200) r(15);
                    line-height: r(70);
                    color: #e33030;
                    font-size: r(26);
                    
                    }
                    }
                    
       .index-ul{
           margin-top: r(20);
           width: 100%;height: r(249);border-bottom: 1px solid #DEDEDE;
          ul{height: 100%; background: #FFFFFF;
           a{width: 100%; height: 100%; display: block;}
             li{float: left;width: 33.3%;vertical-align: bottom;
                    position: relative;
                    height: 100%;text-align: center;
                    
                    
                .index-ul-pic1{width: r(81);height: r(81);margin: 0 auto;padding-top: r(56);}
                .index-ul-pic2{width: r(80);height: r(88);margin: 0 auto;padding-top: r(50);}
                .index-ul-pic3{width: r(81);height: r(80);margin: 0 auto;padding-top: r(58);}
                 .index-ul-pic4{width: r(81);height: r(82);margin: 0 auto;padding-top: r(50);}
                .index-ul-pic5{width: r(91);height: r(82);margin: 0 auto;padding-top: r(50);}
                .index-ul-pic6{width: r(90);height: r(82);margin: 0 auto;padding-top: r(50);}
                img{width: 100%; height: 100%;}
                span{color: #b4b4b4;
                        font-size: r(26);
                        margin-top: r(38);}
                i{position: absolute;top: r(20);
                    display: inline-block;
                    width: r(31);height: r(33);
                    left:60%;
                    img{width: 100%;height: 100%;}
                    }
            }}
       }
       
       
    }
    
  footer {
  width: 100%;
  height: r(99);
  position: absolute;
  bottom: 0;
border-top: 1px solid #DFDFDD; 
  ul li {
    width: 25%;
    height: 100%;
    float: left;
    margin-top: r(14);
    text-align: center; 
    i.iconfont {
      font-size: r(45);
      -webkit-text-stroke: 1px #DFDFDF;
      color: transparent; }}
    li.active .iconfont {
      color: #d62d31;  -webkit-text-stroke:0;}
    li:hover .iconfont {
      color: #d62d31; -webkit-text-stroke: 0; }
    p {
      font-size: r(20); }
    a {
      color: #333333; }
      
      }